<template>
  <div class="selfCheckScrapRecordDetail zy-content">
    <back-level :go-page="backPage"/>
    <Row :gutter="16">
      <Col span="16">
        <div class="alarmConfiguration">
          <div class="list-layout mt16">
            <!-- 表格 -->
            <div class="tableContent">
              <Table class="resizable-table" border highlight-row @on-row-click="changeNum2"
                     :columns="columns" ellipsis stripe :data="dataArr">
                <template slot-scope="{ row }" slot="imagePath">
                  <div class="image"
                       v-for="(item, index) in row.imagePath"
                       :key="index"
                       @click="imgClick(row.imagePath,index)"
                       :style="{
                          backgroundImage: 'url(' + item.fileUrl + ')',
                          width: '20px',
                          height: '30px',
                          display:'inline-block',
                          marginRight:'10px'
                         }"></div>
                </template>
                <template slot-scope="{ row }" slot="action">
                  <span class="operationBtn"
                        @click="deleteRow(row)" v-has="'selfCheckScrapRecordDel'">
                    <i class="iconfont zy-common-shanchu"></i>删除
                  </span>
                </template>
              </Table>
            </div>
            <!-- 分页 -->
            <div class="pageWrap mt16">
              <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
            </div>
          </div>
        </div>
      </Col>
      <Col span="8" v-if="isShowTable2">
        <div class="alarmConfiguration">
          <div class="list-layout mt16">
            <!-- 表格 -->
            <div class="tableContent">
              <Table class="resizable-table" border :columns="columns2" ellipsis stripe :data="dataArr2"></Table>
            </div>
            <!-- 分页 -->
            <div class="pageWrap mt16">
              <Page :total="total2" :page-size="pageSize2" :page-size-opts="pageSizeOption2" :current="pageNum2"
                    @on-change="changePageNum2" @on-page-size-change="changePageSize2" show-sizer show-total/>
            </div>
          </div>
        </div>
      </Col>
    </Row>

    <div>
      <gallery :images="images" :index="imgIndex" @close="imgIndex = null"></gallery>

    </div>
    <deleteModal ref="deleteModal" @submit="submit"></deleteModal>
  </div>
</template>

<script>
  import {searchHistory, queryWorkSelfCheck} from "@/api/spareParts/selfCheckScrapRecord.js";
  import deleteModal from "@/components/modalTypes/deleteModal.vue";
  import VueGallery from 'vue-gallery';

  export default {
    name: "selfCheckScrapRecordDetail",
    components: {
      'gallery': VueGallery,
      deleteModal,
    },
    data() {
      return {
        images: [],
        imgIndex: null,
        //一级table配置
        columns: [
          {
            title: "自检人",
            key: "operator",
            minWidth: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "报废数量",
            key: "outNumTotal",
            minWidth: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "报废重量（kg）",
            key: "outNumTotal",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "不良项类型",
            key: "checkType",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "生产日期",
            key: "shiftTime",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "班次",
            key: "shift",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "备注",
            key: "remarks",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "自检时间",
            key: "reportingTime",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "图片",
            slot: "imagePath",
            minWidth: 160,
            align: "center",
          },
          {
            title: "操作",
            slot: "action",
            fixed: "right",
            width: 160,
            align: "center",
          },
        ],
        dataArr: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        pageSizeOption: [10, 20, 30, 40],
        //二级table配置
        selfCheckId: null,
        isShowTable2: false,
        columns2: [
          {
            title: "不良项",
            key: "ngCode",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "描述",
            key: "aa",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "不良数量",
            key: "ngNnumber",
            minWidth: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          }
        ],
        dataArr2: [],
        pageNum2: 1,
        pageSize2: 10,
        total2: 0,
        pageSizeOption2: [10, 20, 30, 40],
        delId:'',
      };
    },
    mounted() {
      this.changeNum();
    },
    methods: {
      imgClick(imagePath, index) {
        this.images = [];
        for (let i = 0; i < imagePath.length; i++) {
          this.images.push(imagePath[i].fileUrl);
        }
        this.imgIndex = index;
      },
      backPage() {
        this.$router.go(-1)
      },
      //分页
      changeNum() {
        this.pageNum = 1;
        this.searchList();
      },
      changePageSize(pageSize) {
        this.pageSize = pageSize;
        this.searchList();
      },
      changePageNum(val) {
        this.pageNum = val;
        this.searchList();
      },
      //查询列表
      searchList() {
        let params = {
          workCode: this.$route.query.workCode,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
        searchHistory(params).then((res) => {
          if (res.code === 200) {
            this.dataArr = res.data.records;
            this.total = res.data.total;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      },

      //分页
      changeNum2(row) {
        this.selfCheckId = row.id;
        this.isShowTable2 = true;
        this.pageNum2 = 1;
        this.searchList2();
      },
      changePageSize2(pageSize) {
        this.pageSize2 = pageSize;
        this.searchList2();
      },
      changePageNum2(val) {
        this.pageNum2 = val;
        this.searchList2();
      },
      //查询列表
      searchList2() {
        let params = {
          selfCheckId: this.selfCheckId,
          pageNum: this.pageNum2,
          pageSize: this.pageSize2,
        };
        queryWorkSelfCheck(params).then((res) => {
          if (res.code === 200) {
            this.dataArr2 = res.data.records;
            this.total2 = res.data.total;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      },
      submit(){
        this.axios({
          url:'/dms/workSelfCheck/delete',
          method:'delete',
          params:{
            id: this.delId
          }
        }).then(res=>{
          if(res.code === 200){
            this.$Message.success({
              content: res.msg,
              duration: 6,
              closable: true,
            })
            this.dataArr2=[];
          }else{
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            })
          }
          this.changeNum();
        })
      },
      deleteRow(row){
        this.delId=row.id
        this.$refs.deleteModal.showModal();
      },
    },
  };
</script>